<script setup>
import { ref, onMounted, watch } from 'vue'
import { getDoctorList, getDoctorInfo } from '@/api/doctor'
import { useStatusStore } from '../../../stores'

const doctors = ref([])
const total = ref(0)
// 查询条件
const searchQuery = ref('')
const currentPage = ref(1)
const pageSize = ref(10)

onMounted(async () => {
  handleSearchClick()
})

const handleSearchClick = async () => {
  const res = await getDoctorList({
    name: searchQuery.value,
    pageNumber: currentPage.value,
    pageSize: pageSize.value
  })

  doctors.value = res.data.records
  total.value = res.data.total
}

const handlePageQuery = async () => {
  handleSearchClick()
}

const showDoctorModal = ref(false)
const showPatientModal = ref(false)
const currentDoctor = ref({})

const openDoctorModal = async (type, doctor) => {
  type === 'individual'
    ? (showDoctorModal.value = true)
    : (showPatientModal.value = true)

  const res = await getDoctorInfo(doctor.doctorId)

  currentDoctor.value = res.data
  console.log(currentDoctor.value)
}

const statusStore = useStatusStore()
watch(
  () => statusStore.componentKey,
  async () => {
    handleSearchClick()
  }
)
</script>

<template>
  <div class="doctors-container">
    <header class="header">
      <h2>医生管理</h2>
      <input-search
        v-model="searchQuery"
        class="search-input"
        @search-click="handleSearchClick"
        text="搜索医生姓名"
      ></input-search>
    </header>

    <div class="doctors-list">
      <overview-card
        v-for="doctor in doctors"
        :key="doctor.id"
        class="doctor-card"
      >
        <div class="doctor-avatar">
          {{ doctor.name.charAt(0) }}
        </div>
        <div class="doctor-info">
          <div class="doctor-name">
            {{ doctor.name }}
            <span class="doctor-id">ID: {{ doctor.doctorId }}</span>
          </div>
          <div class="doctor-details">
            <span>{{ doctor.gender }}</span>
            <span>{{ doctor.deptName }}</span>
            <span>{{ doctor.title }}</span>
          </div>
        </div>
        <div class="doctor-actions">
          <Button
            class="btn-edit"
            @click="openDoctorModal('individual', doctor)"
            text="查看详情"
          >
          </Button>
          <Button
            class="btn-edit"
            @click="openDoctorModal('patient', doctor)"
            text="照顾的病人"
          >
          </Button>
        </div>
      </overview-card>
    </div>

    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[10, 50, 100, 500]"
      :size="size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handlePageQuery"
      @current-change="handlePageQuery"
    />

    <popup-card :show="showDoctorModal" class="doctor-modal">
      <div class="modal-content">
        <h2>医生详情</h2>
        <el-form label-width="10rem">
          <el-form-item label="医生姓名">
            <el-input v-model="currentDoctor.name" disabled />
          </el-form-item>
          <el-form-item label="医生性别">
            <el-input v-model="currentDoctor.gender" disabled />
          </el-form-item>
          <el-form-item label="所属科室">
            <el-input v-model="currentDoctor.deptName" disabled />
          </el-form-item>
          <el-form-item label="医生职称">
            <el-input v-model="currentDoctor.title" disabled />
          </el-form-item>
          <el-form-item label="当前治疗人数">
            <el-input v-model="currentDoctor.currentPatientCount" disabled />
          </el-form-item>
          <el-form-item label="最大治疗人数">
            <el-input v-model="currentDoctor.maxPatientCount" disabled />
          </el-form-item>

          <div class="modal-actions">
            <Button
              class="btn-cancel"
              @click.prevent="showDoctorModal = false"
              text="取消"
            >
            </Button>
          </div>
        </el-form>
      </div>
    </popup-card>

    <popup-card :show="showPatientModal" class="doctor-modal">
      <div class="modal-content">
        <h2>照顾的病人信息</h2>
        <el-form label-width="7rem">
          <div
            v-for="(patient, index) in currentDoctor.patients"
            :key="patient.id"
          >
            <h3>病人{{ index + 1 }}</h3>
            <el-form-item label="病人ID">
              <el-input v-model="patient.patientId" disabled />
            </el-form-item>
            <el-form-item label="病人姓名">
              <el-input v-model="patient.name" disabled />
            </el-form-item>
            <el-form-item label="病人性别">
              <el-input v-model="patient.gender" disabled />
            </el-form-item>
            <el-form-item label="病房位置">
              <el-input v-model="patient.location" disabled />
            </el-form-item>
          </div>

          <div v-if="currentDoctor.patients?.length === 0" class="no-records">
            该医生暂时没有病人
          </div>

          <div class="modal-actions">
            <Button
              class="btn-cancel"
              @click.prevent="showPatientModal = false"
              text="取消"
            >
            </Button>
          </div>
        </el-form>
      </div>
    </popup-card>
  </div>
</template>

<style lang="scss" scoped>
@use '@/assets/scss/abstracts/variables' as *;
@use '@/assets/scss/abstracts/mixins' as *;
@use 'sass:color';

.doctors-container {
  padding: 2rem;

  .header {
    @include flexSpaceBetweenCenter;
    margin-bottom: 1.5rem;
    min-height: 5rem;
  }

  .doctors-list {
    @include grid-35-2;
  }

  .el-pagination {
    margin-top: 2rem;
    justify-self: center;
  }

  .doctor-card {
    @include flexSpaceBetweenCenter;
  }

  // 其他样式
  .doctor-avatar {
    @include flexCenter;
    background-color: $color-blue-1;
    color: $color-white;
    border-radius: 50%;
    width: 5rem;
    height: 5rem;

    font-size: 2.4rem;
    margin-right: 1.5rem;
  }

  .doctor-info {
    flex-grow: 1;

    .doctor-name {
      font-size: 1.8rem;
      font-weight: bold;
      margin-bottom: 0.5rem;

      .doctor-id {
        font-size: 1.4rem;
        color: $color-grey-1;
      }
    }

    .doctor-details {
      font-size: 1.4rem;
      color: $color-grey-1;
      display: flex;
      gap: 1rem;
    }
  }

  .doctor-actions {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    .btn-edit {
      background-color: $color-primary-dark-2;
      padding: 0.7rem;
      border-radius: 0.7rem;

      &:hover {
        background-color: color.adjust($color-primary-dark-2, $lightness: -10%);
        transform: none;
      }

      &:focus {
        transform: none;
      }
    }
  }

  .modal-content {
    padding: 1rem;
    width: 40rem;
    max-height: 40rem;
    overflow: auto;

    h2 {
      margin-bottom: 2rem;
    }

    .el-input {
      width: 100%;
    }

    .no-records {
      font-size: 1.4rem;
      text-align: center;
      color: $color-grey-1;
      margin-bottom: 1rem;
    }

    .modal-actions {
      display: flex;
      justify-content: flex-end;
      align-items: center;

      .btn-cancel {
        width: 6rem;
        padding: 0.8rem;
        border-radius: 0.8rem;

        &:hover {
          background-color: color.adjust(
            $color-primary-dark-2,
            $lightness: -10%
          );
        }
      }
    }
  }
}
</style>
